<template>
	<view class="z-menu" v-show="props.show">
		<view class="z-menu-item" @click="go(m, i)" :class="{ active: i === state.active }"
			v-for="(m, i) in state.menus" :key="m.pagePath">
			<view class="icon">
				<image class="image" :src="i === state.active ? m.selectedIconPath : m.iconPath"></image>
			</view>
			<view class="title">{{ m.text }}</view>
		</view>
	</view>
</template>

<script setup>
	import { getCurPage, getResource } from 'src/plugins/utils';
	const props = defineProps({
		show: {
			type: Boolean,
			default: () => true
		}
	})

	function go(m, i) {
		state.active = i;
		uni.reLaunch({
			url: '/' + m.pagePath
		});
	}
	const menus = [{
			text: '首页',
			iconPath: getResource('home.png'),
			selectedIconPath: getResource('homeActive.png'),
			pagePath: 'pages/home/index'
		},
		{
			text: '成果',
			iconPath: getResource('statistics.png'),
			selectedIconPath: getResource('statisticsActive.png'),
			pagePath: 'pages/statistics/index'
		},
		{
			text: '服务',
			iconPath: getResource('discover.png'),
			selectedIconPath: getResource('discoverActive.png'),
			pagePath: 'pages/discover/index'
		},
		{
			text: '我的',
			iconPath: getResource('my.png'),
			selectedIconPath: getResource('myActive.png'),
			pagePath: 'pages/my/index'
		}
	];
	const state = reactive({
		menus,
		active: 0
	});
	const { route } = getCurPage();
	state.active = menus.findIndex((m) => m.pagePath === route) || 0;
</script>

<style lang="less" scoped>
	@import 'index';
</style>